<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link type="text/css" href="css/placeOrder.css" rel="stylesheet"/>
    <script type="application/javascript" rel="script" src="js/jquery-2.1.1.min.js"></script>
    <script type="application/javascript" rel="script" src="js/bootstrap.min.js"></script>
    <!--导入vue 包-->
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <script src="vue/Vue.v2.6.12.js"></script>
</head>
<body>
<div id="placeOrder">


    <!--头部-->
    <top>
        <section class="seck">
            <div class="register_login">
                <em>您好，</em>
                <a href="login.html">会员登录</a>
                <a href="register.html">快速注册</a>
            </div>
            <div class="vip_center">
                <a href="user_center.html">用户中心</a>
                <a href="#">商户中心</a>
                <a href="#">帮助</a>
            </div>
        </section>
    </top>

    <!--header-->
    <div class="maxbj1">
        <header>
            <b class="logo"><img src="images/logo1.png"></b>
            <search>
                <div>
                    <input type="text" placeholder="查询关键词..." required="" id="search_title"
                           style=" width:440px; height:30px; text-indent:2em; float:left; box-shadow:none">
                    <button onclick="search()">搜索</button>
                </div>
            </search>
            <div class="sping_car">
                <b></b>
                <a href="Cart.html"><em>我的购物车</em></a>
            </div>
        </header>
    </div>

    <!--导航-->
    <section class="dao_hang">
        <nav>

            <!--结束-->
            <div class="dao_list">
                <a href="index.html">首页</a>
                <a href="#">超级福包</a>
                <a href="#">母婴之家</a>
                <a href="#">厨房用品</a>
                <a href="#">生活必备</a>
                <a href="#">试吃申请</a>
                <a href="#">最新公告</a>
            </div>
        </nav>
    </section>


    <div class="cont">

        <h4 class="orderTitle">收货地址</h4>

        <table class="ord">
            <tr class="AddressListForeach" v-for="(address) in addressList">
                <td width="30%">
                    <input type="radio" :value="address.addressId" name="addressChecked"
                           @click="chosenAddress(address.addressId)"/> {{address.name}}
                </td>
                <td width="50%">
                    |{{address.province}},{{address.city}},{{address.district}},{{address.detailed}} {{address.zip}} |
                    {{address.phone}}
                </td>
                <td>
                    <span class="green upd"><a href="address.html">[修改]</a></span>
                </td>
            </tr>
        </table><!--ord/-->


        <div class="clears"></div>
        </ul><!--zhiList/-->


        <h4 class="orderTitle">购物清单</h4>

        <table class="goodList">
            <tr>
                <th width="20">ID</th>
                <th width="430">商品</th>
                <th width="135">单价</th>
                <th width="135">数量</th>
                <th width="135">总金额</th>
            </tr>
            <tr v-for="showGoods in goodList" align="center">
                <td><span><strong>{{showGoods.goodId}}</strong></span></td>
                <td align="center">

                    <dl>
                        <img :src="showGoods.goodImg" width="15%" height="15%"/>

                        {{showGoods.goodName}}

                    </dl>
                </td>
                <td><strong class="red">￥{{showGoods.goodPrice}}</strong></td>
                <!-- 商品数量-->
                <td>


                    <span>{{showGoods.goodCount}}</span>


                </td>
                <td><strong class="red">{{showGoods.goodCount*showGoods.goodPrice}}</strong></td>

            </tr>


        </table><!--goodList/-->

        <table class="zongjia" align="right">
            <tr>
                <td width="120" align="left">商品总价：</td>
                <td width="60"><strong class="red">{{totalPrice}}</strong></td>
            </tr>
            <tr>
                <td width="120" align="left">运费总额：</td>
                <td><strong class="red">包邮</strong></td>
            </tr>

            <tr>
                <td width="120" align="left">合计：</td>
                <td><strong class="red">{{totalPrice}}</strong></td>
            </tr>

            <tr>
                <td colspan="2" style="height:50px;">
                    <a href="#" @click="confirmOrder(totalPrice)"><img src="images/tijao.png" width="142" height="32"/></a>
                </td>
            </tr>
        </table><!--zongjia/-->
        <div class="clears"></div>

    </div><!--cont/-->

    <div class="footer">
        <p>

            <a href="index.html">商城首页</a>&nbsp;|&nbsp;
            <a href="order.html">我的订单</a>&nbsp;|&nbsp;
            <a href="login.html">会员中心</a>&nbsp;|&nbsp;
            <a href="help.html">帮助中心</a>
        </p>
        <p>
            版权所有：饭醉团伙 版权所有 Copyright 2010-2015 沪ICP备00000000号   </a>
        </p>

    </div><!--footer/-->


</div><!--mianCont/-->

</div>
</body>

</html>
<script type="text/javascript">
    let vm = new Vue({
        el: '#placeOrder',
        data: {
            order: {},
            addressList: [],
            goodList: [],
            checkedGoods: [],
            totalPrice: 0,
            chosenAddressID: 0,
            userID: 0,
            balance: 0,


        },
        methods: {
            getDataFromSql() {
                this.order = localStorage.getItem("addOrder");
                let parse = JSON.parse(this.order);
                let userId = parse.userId;
                this.userID = userId;
                let orderNumber = localStorage.getItem("orderNumber");


                //获取订单
                this.getOrder(orderNumber, userId);
                //获取地址列表
                this.getAddressList(userId);
                //获取用户余额
                this.getUserBalance(userId);

            },
            //获得地址列表
            getAddressList(userId) {
                let url = '/address/queryByUserIdGetAllAddress.do';
                let thisObj = this;
                let param = {
                    "userId": userId
                };
                postWithParams(url, param, function (data) {
                    thisObj.addressList = data;


                })
            },
            //获得订单列表
            getOrder(orderNumber, userId) {

                let order = {
                    "orderNumber": orderNumber,
                    "userId": userId
                }
                let url = '/order/searchOrderByOrderNumber.do';

                let thisObj = this;
                postWithJson(url, order, function (data) {

                    //获得订单商品列表
                    thisObj.goodList = data[0].goodList;
                    thisObj.goodList.forEach(function (goods) {
                        let sum = goods.goodPrice * goods.goodCount;
                        thisObj.totalPrice = thisObj.totalPrice + sum;
                    })
                })
            },
            getUserBalance(userId) {
                let params = {
                    "userID": userId
                };
                let url = '/userAccount/findUserBalanceByUserId.do';
                let thisObj = this;

                getWithParams(url, params, function (data) {
                    thisObj.balance = data;
                })

            },
            chosenAddress(addressId) {
                this.chosenAddressID = addressId;


            },
            confirmOrder(totalPrice) {

                let orderNumber = localStorage.getItem("orderNumber");
                // location.href=appendHost("order/pay.do?orderId="+orderNumber)

                // 判断地址是否已经选择
                if (this.chosenAddressID == 0) {
                    alert("请选择收货地址");
                    return;
                }
                //判断是否已选择商品
                if (totalPrice == 0) {
                    alert("请选择商品");
                    return;
                }
                //判断用户余额是否足够支付
                let userBalance = this.balance - totalPrice;
                if (userBalance < 0) {
                    alert("账户余额不足，请充值");
                    // 跳转至充值界面
                    location.href = '/views/user_view/user_recharge.html';
                    return;
                }


                // 扣钱成功
                // 修改用户余额
                this.updateUserBalance(userBalance);
                //修改订单状态
                this.updateOrder();


                // 删除localstorage中的信息
                localStorage.removeItem("addOrder");



                alert("支付成功");

                // 跳转至订单页面

                // location.href = '/views/user_view/user_order.html';
                location.href=appendHost("order/pay.do?orderNumber="+orderNumber);

            },

            updateGoodSales() {
                console.log("修改销售额")
                let url = 'http://localhost/merchant_api/goodSales/updateSalesPurchased.do';
                this.goodList.forEach(function (good) {
                    let params = {
                        goodId: good.goodId,
                        salesVolume: good.goodCount,
                        salesPurchased: good.goodCount,
                        good: good
                    }
                    let param = JSON.stringify(params);
                    console.log(param)
                    $.ajax({
                        type: "post",
                        url: url,
                        dataType: 'json',
                        contentType: "application/json;charset=UTF-8",
                        data: param,
                        async: false,
                        success: function (resp) {
                            handlerResp(resp, callback);
                        }
                    });
                })
            },
            updateOrder() {
                //修改用户订单状态
                let thisObj = this;
                console.log("修改用户订单状态");
                let url = '/order/updateOrder.do'
                let order = JSON.parse(this.order);
                let param = {
                    "userId": this.userID,
                    "orderNumber": order.orderNumber,
                    "orderStatus": 1,
                    "address": this.chosenAddressID,
                    "good": this.checkedGoods

                }

                postWithJson(url, param, function (data) {
                    thisObj.updateGoodSales();
                })

            },
            updateUserBalance(userBalance) {
                //修改用户余额
                console.log("修改用户余额");
                let url = '/userAccount/updateUserBalance.do';
                let params = {
                    "userId": this.userID,
                    "money": userBalance
                }
                getWithParams(url, params, function () {

                })
            }
        },
        watch: {},
        mounted: function () {

            this.getDataFromSql();

        }
    })
</script>

